<template>
  <div class="plant-box">
    <plant-header :listData="modelValue" v-model="selectedItem"></plant-header>
    <ul class="plant2-content-box">
      <li
        v-for="item in listData"
        :key="item.t_content_pk"
        class="plant2-list-item"
      >
        <aside>
          <p>{{ item.publish_time.substring(8, 10) }}</p>
          <p>{{ item.publish_time.substring(0, 7) }}</p>
        </aside>
        <hgroup>
          <h3 :title="item.title">
            <router-link :to="getRowUrl({}, item)">{{
              item.title
            }}</router-link>
          </h3>
          <h4 :title="item.subtitle">
            {{ item.subtitle }}
          </h4>
        </hgroup>
      </li>
    </ul>
  </div>
</template>
  
  <script>
import { indexPlant } from "@/util/mixin";

export default {
  mixins: [indexPlant],
  data() {
    return {
      swiperRows: 0,
      listRows: 5,
    };
  },
};
</script>
  
  <style scoped>
.plant-box {
  width: 440px;
}

.plant2-list-item {
  display: flex;
}

.plant2-list-item > aside {
  background-image: url("https://www.forerunnercollege.com/so/static/img/tz-icon.9117519f.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 24px;
  width: 80px;
}

.plant2-list-item > aside > p:nth-child(1) {
  color: var(--base-color);
  font-size: 110%;
  font-weight: 600;
}

.plant2-list-item > hgroup {
  width: 340px;
  line-height: 24px;
}

.plant2-list-item > hgroup > h3 {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  width: 100%;
}

.plant2-list-item > hgroup > h3:hover,
.plant2-list-item > hgroup > h3:hover > a {
  color: var(--base-color);
}

.plant2-list-item > hgroup > h4 {
  font-weight: 400;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  width: 100%;
}
</style>